<script setup>
import { ref } from 'vue';
const productDialogVisible = ref(false)
const products = ref([
    { id: 1, name: '商品1', price: 100, stock: 50 },
    { id: 2, name: '商品2', price: 200, stock: 30 },
]);
const productForm = ref({
    name: '',
    price: 0,
    stock: 0
})

const showProductDialog = () => {
    // 打开新增商品对话框
    productDialogVisible.value = true
};

</script>

<template>
    <el-card class="management-container">
        <template #header>
            <div class="header-wrapper">
                <span class="header-title">商品管理</span>
                <div class="action-buttons">
                    <el-button type="primary" @click="showProductDialog">
                        新增商品
                    </el-button>
                </div>
            </div>
        </template>
        <el-table :data="products" border>
            <el-table-column prop="name" label="商品名称" />
            <el-table-column prop="price" label="价格" />
            <el-table-column prop="stock" label="库存" />
            <el-table-column label="操作" width="150">
                <template #default>
                    <el-button size="small">编辑</el-button>
                    <el-popconfirm title="确认删除?" confirm-button-text="确认" cancel-button-text="取消" @confirm="confirm">
                        <template #reference>
                            <el-button size="small" type="danger">删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
    </el-card>
    <!-- 商品对话框 -->
    <el-dialog v-model="productDialogVisible" title="商品信息">
        <el-form :model="productForm" label-width="80px">
            <el-form-item label="商品名称">
                <el-input v-model="productForm.name" />
            </el-form-item>
            <el-form-item label="价格">
                <el-input-number v-model="productForm.price" :min="0" />
            </el-form-item>
            <el-form-item label="库存">
                <el-input-number v-model="productForm.stock" :min="0" />
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button @click="productDialogVisible = false">取消</el-button>
            <el-button type="primary" @click="handleProductSubmit">确认</el-button>
        </template>
    </el-dialog>
</template>

<style scoped>
.management-container {
    .header-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 16px;

        .header-title {
            font-size: 18px;
            font-weight: 500;
        }

        .action-buttons {
            display: flex;
            gap: 8px;
        }
    }

    .el-table {
        margin-top: 20px;
    }
}
</style>